<template>
  <div class="app-container">
    <div class="top">
      <!-- <img src="@/assets/bg.jpg" width="100%" height="30px" alt=""> -->
      <!-- 顶部 -->
      <div class="top-first">
        <div class="top-first1">
          <span class="p1">督教评教</span>
          <span class="p1">领导评教</span>
          <span class="p1">同行评教</span>
          <span class="p1">评教结果</span>
        </div>
        <div class="top-first2">
          <el-date-picker
            type="date"
            placeholder="2022-09-05"
          />
        </div>
      </div>
      <div class="top-second">
        <div class="top-second-style">
          <span>要求任务量</span>
          <p>要求</p>
          <p>已完成</p>
        </div>
        <div class="top-second-style">
          <span>要求任务量</span>
          <p>要求</p>
          <p>已完成</p>
        </div>
        <div class="top-second-style">
          <span>要求任务量</span>
          <p>要求</p>
          <p>已完成</p>
        </div>
        <div class="top-second-style">
          <span>要求任务量</span>
          <p>要求</p>
          <p>已完成</p>
        </div>
        <div class="top-second-style">
          <span>要求任务量</span>
          <p>要求</p>
          <p>已完成</p>
        </div>
      </div>
    </div>
    <div class="center">
      <!-- 中间 -->
      <div class="center-top">
        <!-- <p>评教课表</p> -->
        <el-divider content-position="center" class="tellp">评教课表</el-divider>
      </div>
      <div class="center-center">
        <span>第 3 教学周</span>
        <!-- <el-button>上一周</el-button>
        <el-button>下一周</el-button>
        <el-button>本周</el-button> -->
        <div class="checkbox">
          <el-checkbox-button label="上一周" name="type" />
          <el-checkbox-button label="下一周" name="type" />
          <el-checkbox-button label="本周" name="type" />
        </div>
        <div class="center-center-right">
          <span class="span1">隐藏已评</span>
          <span class="span2">隐藏周末</span>
          <el-button size="small" class="button">全校开课查询</el-button>
        </div>

      </div>
      <div class="center-footer">
        <el-table
          :data="queryList"
          class=""
          stripe
          border
        >

          <el-table-column align="center" type="index" prop="" label="节次" width="50" />
          <el-table-column align="center" prop="one" label="周一/03-02">
            <template slot-scope="scope">
              <p class="tablewrite">[预约] {{ scope.row.one.one1 }}</p>
              <p class="tablewrite">[自选]{{ scope.row.one.one2 }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="two" label="周二/03-03">
            <template slot-scope="scope">
              <p style="background:#c48ad4"> {{ scope.row.two.one1 }}</p>
              <p style="background:#ebbc13">{{ scope.row.two.one2 }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="three" label="周三/03-04">
            <template slot-scope="scope">
              <p style="background:#62e2c6"> {{ scope.row.three.one1 }}</p>
              <p style="background:#67e43f">{{ scope.row.three.one2 }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="four" label="周四/03-05">
            <template slot-scope="scope">
              <p class="tablewrite"> {{ scope.row.four.one1 }}</p>
              <p class="tablewrite">{{ scope.row.four.one2 }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="five" label="周五/03-06">
            <template slot-scope="scope">
              <p class="tablewrite"> {{ scope.row.five.one1 }}</p>
              <p class="tablewrite">{{ scope.row.five.one2 }}</p>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>
    <div class="footer-top">
      <!-- <p>评教课表</p> -->
      <el-divider content-position="center" class="footer-tellp">推荐听课</el-divider>
    </div>
    <div class="footer">
      <!-- 底部 -->
      <div class="footer-box">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location" />
              <span>我的全部计划（8）</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu" />
            <span slot="title">热门教师（29）</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document" />
            <span slot="title">排名靠后教师（20）</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting" />
            <span slot="title">排名靠前教师（20）</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-menu" />
            <span slot="title">新开课程（8）</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-menu" />
            <span slot="title">热门课程（10）</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-menu" />
            <span slot="title">排名靠前课程（11）</span>
          </el-menu-item>

        </el-menu>
      </div>
      <div class="footer-div">
        <div class="footer-div1">
          <div v-for="(item,index) in list1" :key="index">
            <span>{{ item.name }}</span>
            <p>{{ item.time }}</p>
          </div>
        </div>
        <div class="footer-div2">
          <div v-for="(item,index) in list2" :key="index">
            <span>{{ item.name }}</span>
            <p>{{ item.time }}</p>
          </div>
        </div>
      </div>
    </div>
  </div></template>

<script>

export default {
  name: '',
  components: {

  },
  data() {
    return {
      queryList: [
        {
          // one: '王晶 经济学理论'
          one:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          },
          two:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          },
          three:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          },
          four:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          },
          five:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          }
        },
        {
          // one: '王晶 经济学理论'
          one:
          {
            one1: '王晶 经济学理论',
            one2: '王晶 经济学理论'
          },
          two:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          },
          three:
          {
            one1: '',
            one2: ''
          },
          four:
          {
            one1: '王晶 经济学理论',
            one2: '殷俊俊 高等数学'
          },
          five:
          {
            one1: '',
            one2: ''
          }
        },
        {
          // one: '王晶 经济学理论'
          one:
          {
            one1: '王晶 经济学理论',
            one2: '王晶 经济学理论'
          },
          two:
          {
            one1: '',
            one2: ''
          },
          three:
          {
            one1: '殷俊俊 高等数学',
            one2: '殷俊俊 高等数学'
          },
          four:
          {
            one1: '',
            one2: ''
          },
          five:
          {
            one1: '',
            one2: ''
          }
        }
      ],
      list1: [
        {
          name: '张三',
          time: '2022-09-05'
        },
        {
          name: '张三',
          time: '2022-09-05'
        },
        {
          name: '张三',
          time: '2022-09-05'
        }
      ],
      list2: [
        {
          name: '张三',
          time: '2022-09-05'
        },
        {
          name: '张三',
          time: '2022-09-05'
        },
        {
          name: '张三',
          time: '2022-09-05'
        }
      ]
    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 350px;
  display: flex;
  flex-direction: column;
  background-image: url('~@/assets/bg.jpg');
  // background: url(@./assets/bg.jpg);
  // background-image: url(../../assets/bg.jpg);
  // background: whitesmoke;
  .top-first {
    display: flex;
    flex-direction: row;
    padding-top: 30px;
    .top-first1 {
      justify-content: space-around;
      margin-left: 10px;
      .p1 {
        color: rgb(255, 255, 255);
        text-shadow: 0 0 10px rgb(199, 196, 196),0 0 20px rgb(196, 194, 194),0 0 30px rgb(209, 207, 207),0 0 40px #ffff;
        font-size: 20px;
        margin-left: 20px;
        padding-top: 20px;
        padding-left: 20px;
      }
    }
    .top-first2 {
      position: absolute;
      right: 50px;
    }
  }
  .top-second {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 50px;
    .top-second-style {
      width: 18%;
      height: 200px;
      background-color:rgb(255, 255, 255,0.7);
      margin-left: 10px;
      padding-top: 50px;
      padding-left: 90px;
    }
  }

}
::v-deep .center-top .el-divider__text {
    font-size: 25px;
  }
.center {
  .center-top {
    .tellp {
      letter-spacing: 20px;
    }
  }
  .center-center {
    padding-left: 25px;
    padding-top: 10px;
    .checkbox {
      position: relative;
      top: -28px;
      padding-left: 100px;
    }
    .center-center-right {
      position: absolute;
      // letter-spacing: 20px;
      margin-left: 10%px;
      right: 5%;
      top: 47%;
      .span1{
        margin-left: 0px;
      }
      .span2{
        margin-left: 40px;
      }
      .button {
        margin-left: 40px;
      }
      // padding-left: 80%;
      // padding-top: -28px;
    }
  }
}
.tablewrite {
  background: rgb(86, 164, 201);
}
::v-deep .footer-top .el-divider__text {
    font-size: 25px;
    background: rgb(255, 255, 255,0.9);
  }
.footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 500px;
  background-image: url('~@/assets/bg1.jpg');
  border-radius: 5px;

  .footer-top{
    .footer-tellp {
      letter-spacing: 20px;
    }
  }
  .footer-box{
    width: 30%;
    padding-left: 10%;
    padding-top: 50px;
    padding: auto;
  }
  .footer-div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 60%;
    height: 390px;
    margin-top: 50px;
    background-color: rgba(199, 195, 195, 0.9) ;
    // border-radius: 5px;

    .footer-div1 ,.footer-div2{
      // background: rgb(255, 255, 255,0.9);
      display: flex;
      flex-direction: column;
      border-radius: 5px;
      width: 40%;
      height: 40%;
      // background: rgba(235, 235, 235, 0.9);
      padding-top: 30px;
      margin-top: 60px;
      margin-left: -20px;
      div {
            flex:1;
            display: flex;
            flex-direction: row;
            padding: 10px;
            font-size: 18px;
            justify-content: space-between;
            &:nth-child(1) {
                background: #eef1fb;
                  p {
                      color: #4daaf7;
                      }
                    }
                  &:nth-child(2) {
                      margin-top: 10px;
                      background: #eef1fb;
                    p {
                        color: #4daaf7;
                      }
                    }
                   &:nth-child(3) {
                      margin-top: 10px;
                      background: #eef1fb;
                      p {
                            color: #4daaf7;
                        }
                    }
                }
    }
  }
}
</style>

